<template>
    <div class="meetingCenter">
        <el-tabs v-model="activeName">
            <el-tab-pane label="基本资料" name="second">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="单位名称" prop="CompanyName">
                      <el-select
                        v-model="ruleForm.CompanyName"   
                        clearable 
                        :no-match-text="ruleForm.CompanyName"
                        filterable
                        allow-create
                        remote
                        reserve-keyword
                        placeholder="请输入单位名称"
                        :remote-method="remoteMethod"
                        :loading="loading">
                        <el-option
                          v-for="item in CompanyNameOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="会议主题" prop="theme">
                      <el-input v-model="ruleForm.theme" placeholder="请输入会议主题"></el-input>
                    </el-form-item>
                    <el-form-item label="签单人" prop="name">
                      <el-input v-model="ruleForm.name" placeholder="请输入签单人"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="contact">
                      <el-input v-model="ruleForm.contact" placeholder="请输入签单人"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证" prop="ID">
                      <el-input v-model="ruleForm.ID" placeholder="请输入签单人"></el-input>
                    </el-form-item>
                    <el-form-item label="营销员" prop="Salesman">
                      <el-select v-model="ruleForm.Salesman" placeholder="请选择营销员" @change="Salesman_change">
                        <el-option v-for="(item,index) in userList" :key="index" :label="item.name" :value="item.id"  ></el-option>                        
                      </el-select>
                    </el-form-item>
                    <el-form-item label="付款方式" prop="payment">
                      <el-select v-model="ruleForm.payment" placeholder="请选择付款方式" @change="payment_change">
                        <el-option v-for="(item,index) in pList" :key="index" :label="item.describes" :value="item.id"></el-option>
                        <!-- pList  describes-->
                      </el-select>
                    </el-form-item>
                </el-form>               
                <el-button type="primary" @click="next('ruleForm')">下一步</el-button>
            </el-tab-pane>
            <el-tab-pane label="会议要求" name="first">
                 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <div class="meeting_tab">
                      <el-form-item label="会议室" prop="Salesman">
                        <el-select v-model="ruleForm.Salesman" placeholder="请选择营销员" @change="Salesman_change">
                          <el-option v-for="(item,index) in userList" :key="index" :label="item.name" :value="item.id"  ></el-option>                        
                        </el-select>
                      </el-form-item>
                      <el-form-item label="会议协议" prop="payment">
                        <el-select v-model="ruleForm.payment" placeholder="请选择付款方式" @change="payment_change">
                          <el-option v-for="(item,index) in pList" :key="index" :label="item.describes" :value="item.id"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="会场布置" prop="Salesman">
                        <el-select v-model="ruleForm.Salesman" placeholder="请选择营销员" @change="Salesman_change">
                          <el-option v-for="(item,index) in userList" :key="index" :label="item.name" :value="item.id"  ></el-option>                        
                        </el-select>
                      </el-form-item>
                      <el-form-item label="会议性质" prop="payment">
                        <el-select v-model="ruleForm.payment" placeholder="请选择付款方式" @change="payment_change">
                          <el-option v-for="(item,index) in pList" :key="index" :label="item.describes" :value="item.id"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="会场负责人" prop="Salesman">
                        <el-select v-model="ruleForm.Salesman" placeholder="请选择营销员" @change="Salesman_change">
                          <el-option v-for="(item,index) in userList" :key="index" :label="item.name" :value="item.id"  ></el-option>                        
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="meeting_tab">
                      <el-form-item label="会议时间" prop="theme">
                        <p>2018-09-22 至 2018-09-23（08:00-21:00）<span>2天</span></p>
                      </el-form-item>
                      <el-form-item label="会议价格" prop="theme">
                        <el-input v-model="ruleForm.theme" placeholder="请输入会议主题"></el-input>
                      </el-form-item>
                      <el-form-item label="参会人数" prop="theme">
                        <el-input v-model="ruleForm.theme" placeholder="请输入会议主题"></el-input>
                      </el-form-item>
                      <el-form-item label="举办方负责人" prop="theme">
                        <p>蔡蔡<span>(13012002022)</span></p>
                      </el-form-item>
                    </div>
                    
                </el-form>
                <el-button type="primary" @click="skip('ruleForm')">跳过</el-button> 
                <el-button type="primary" @click="next2">下一步</el-button>
            </el-tab-pane>
            <el-tab-pane  label="住宿要求" name="third"></el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import {
  getAgreementUnitList,
  getMeetingData,
  addMeetingOrder
} from "@/service/home.js";
export default {
  data() {
    return {
      activeName: "first",
      aUnitList: [],
      CompanyNameOptions: [],
      userList: [], //营销员
      pList: [], //付款方式
      sellUserId: "",
      paymentId: "",
      ruleForm: {
        CompanyName: "",
        theme: "",
        name: "",
        contact: "",
        ID: "",
        Salesman: "",
        payment: ""
      },
      list: [],
      loading: false,
      states: [],
      rules: {
        CompanyName: [
          { required: true, message: "请输入单位名称", trigger: "change" }
        ],
        theme: [{ required: true, message: "请输入会议主题", trigger: "blur" }],
        name: [{ required: true, message: "请输入会议主题", trigger: "blur" }],
        contact: [
          { required: true, message: "请输入会议主题", trigger: "blur" }
        ],
        ID: [{ required: true, message: "请输入会议主题", trigger: "blur" }],
        Salesman: [
          { required: true, message: "请选择营销员", trigger: "change" }
        ],
        payment: [
          { required: true, message: "请选择付款方式", trigger: "change" }
        ]
      }
    };
  },
  mounted() {
    this._getAgreementUnitList();
    this._getMeetingData();
  },
  methods: {
    //获取会议基础信息
    _getMeetingData() {
      let data = {
        agreementUnitId: 0
      }
      getMeetingData(data).then(res => {
        this.userList = res.data.userList;
        this.pList = res.data.pList;
      });
    },
    //获取单位名称数据
    _getAgreementUnitList() {
      var data = {
        companyId: parseInt(sessionStorage.getItem("companyId")),
        state: 1,
        userId: parseInt(sessionStorage.getItem("userId"))
      };
      getAgreementUnitList(data).then(res => {
        console.log(res)
        this.aUnitList = res.data.aUnitList;
        this.aUnitList.forEach(item => {
          this.states.push(item.agreementName);
        });
        this.list = this.states.map(item => {
          return { value: item, label: item };
        });
      });
    },
    next(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.activeName = "second";
        } else {
          console.log(this.CompanyNameOptions)
          console.log("error submit!!");
          return false;
        }
      });
    },
    Salesman_change(id) {
      this.sellUserId = id;
    },
    payment_change(id) {
      this.paymentId = id;
    },
    //基本资料保存
    PreservationBasicData(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //   CompanyName: "",
          // theme: "",
          // name: "",
          // contact: "",
          // ID: "",
          // Salesman: "",
          // payment: ""
          var data = {
            agreementUnit: this.ruleForm.CompanyName,
            theme: this.ruleForm.theme,
            signUser: this.ruleForm.name,
            phone: this.ruleForm.contact,
            idCard: this.ruleForm.ID,
            sellUserId: this.sellUserId,
            paymentId: this.paymentId,
            isMeeting: 0,
            isRoom: 0,
            state: 1
          };
          addMeetingOrder(data).then(res => {
            console.log(res.data);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    next2() {
      this.activeName = "third";
    },
    skip(){

    },
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          console.log(this.CompanyNameOptions)
          this.CompanyNameOptions = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.CompanyNameOptions = [];
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.meetingCenter {
  margin-top: 20px;
  background-color: white;
  padding: 20px 30px;
  position: relative;
  .el-input {
    width: 300px;
  }
  .el-select {
    width: 300px;
  }
  .meeting_tab{
    width: 500px;
    float: left;
  }
}
</style>